<template>
  <div class="upload-resource-doc">
    <el-empty description="暂未上传说明文档" v-if="isEmpty"> </el-empty>
    <div class="container" style="width: 66%" v-else>
      <div class="main" ref="divRef"></div>
      <div class="submit">
        <el-button
          style="width: 100%"
          type="primary"
          round
          @click="submit"
          v-if="!$route.query.id"
          >提交</el-button
        >
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from "vue-router";
import { AiEditor } from "aieditor";
import "aieditor/dist/style.css";
import { ref, onMounted } from "vue";
import {
  reqAddResourceDoc,
  reqUpdateResourceDoc,
  reqQueryResourceDoc,
} from "@/api/resource";
import { ElMessage } from "element-plus";

const isEmpty = ref(false);

const divRef = ref();
let aiEditor = null;

const $route = useRoute();
const $router = useRouter();

const docInfo = ref({});

onMounted(() => {
  initEditor();
  if ($route.query.status != 0 && !$route.query.id) {
    getDocInfo($route.query.resourceId);
  }
});

// 初始化富文本编辑器
const initEditor = () => {
  if ($route.query.id) {
    const entity = {
      resourceId: $route.query.id,
    };
    reqQueryResourceDoc(entity).then((res) => {
      if (!res.data) {
        isEmpty.value = true;
        return;
      }
      if (res.code == 200) {
        docInfo.value = res.data;
        aiEditor = new AiEditor({
          element: divRef.value,
          placeholder: "点击输入内容...",
          content: "",
          editable: false, // 是否可编辑
          toolbarKeys: [], // 不显示工具栏
          theme: "light", // 主题颜色 dark  light
        });
        aiEditor.setContent(res.data.resourceSpecification);
      }
    });
  } else {
    aiEditor = new AiEditor({
      element: divRef.value,
      placeholder: "点击输入内容...",
      content: "",
      contentRetentionKey: true, // 自动保存（缓存）到 localStorage 的 key 值，默认为：ai-editor-content。
    });
  }
};

// 获取文档信息
const getDocInfo = (resourceId) => {
  const entity = {
    resourceId,
  };
  reqQueryResourceDoc(entity).then((res) => {
    if (res.code == 200) {
      docInfo.value = res.data;
      aiEditor.setContent(res.data.resourceSpecification);
    }
  });
};

const submit = () => {
  if (aiEditor.isEmpty()) {
    return;
  }

  if ($route.query.status != 0) {
    // 修改操作
    docInfo.value.resourceSpecification = aiEditor.getHtml();
    reqUpdateResourceDoc(docInfo.value).then((res) => {
      if (res.code == 200) {
        ElMessage.success("修改成功");
        $router.go(-1);
      } else {
        ElMessage.error("修改失败");
      }
    });
  } else {
    // 新增操作
    const entity = {
      resourceId: $route.query.resourceId,
      resourceSpecification: aiEditor.getHtml(),
    };
    reqAddResourceDoc(entity).then((res) => {
      if (res.code == 200) {
        ElMessage.success("新增成功");
        $router.go(-1);
      } else {
        ElMessage.error("新增失败");
      }
    });
  }
};
</script>

<style scoped lang="scss">
.upload-resource-doc {
  width: 100%;
  min-height: calc(100vh - 56px);
  display: flex;
  justify-content: center;
  overflow: hidden;
  .container {
    width: 66%;
    min-height: calc(100vh - 56px);
  }
  .main {
    width: 100%;
    height: 100%;
    overflow: scroll;
    overflow-x: hidden;
  }
  .submit {
    width: 200px;
    height: 50px;
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}

:deep(.aie-content img) {
  width: 100% !important;
}
</style>